<template>
	<uni-card :margin="1" :padding="0">
		<view class="mytop">
			<uni-easyinput type="password" v-model="i1" placeholder="请输入原密码" clearable=""></uni-easyinput>
		</view>
		<view class="uni-mb-5">
			<u-alert
			    :description="a1"
			    type="error"
				v-if="a1!=''"
			></u-alert>
		</view>
		<view>
			<uni-easyinput type="password" v-model="i2" placeholder="请输入新密码" clearable=""></uni-easyinput>
		</view>
		<view class="uni-mb-5">
			<u-alert
			    :description="a2"
			    type="error"
				v-if="a2!=''"
			></u-alert>
		</view>
		<view>
			<uni-easyinput type="password" v-model="i3" placeholder="请输入重复密码" clearable=""></uni-easyinput>
		</view>
		<view>
			<u-alert
			    :description="a3"
			    type="error"
				v-if="a3!=''"
			></u-alert>
		</view>
		<view  class="uni-ma-5">
			<u-button type="warning" @click="onOk()">设置密码</u-button>
		</view>
		<view  class="uni-ma-5">
			<u-button type="primary" :plain="true" @click="onReset()">重    置</u-button>
		</view>
	</uni-card>
</template>

<script setup>
	import { ref,inject } from 'vue'
	const a1 = ref("");
	const a2 = ref("");
	const a3 = ref("");
	const i1 = ref("");
	const i2 = ref("");
	const i3 = ref("");
	const http= inject("$http");
	function onOk(){
		a1.value="";
		a2.value="";
		a3.value="";
		console.log(i1.value,i2.value,i3.value);
		if(i1.value==""){
			a1.value="原密码不能为空"
			return;
		}
		if(i2.value==""||i2.value.length<6){
			a2.value="新密码不能为空且长度要大于6"
			return;
		}
		if(i3.value==""||i3.value.length<6){
			a3.value="重复密码不能为空且长度要大于6"
			return;
		}
		if(i2.value!=i3.value){
			a2.value="重复密码与原密码不一样"
			return;
		}
		http.post("/user/changePass",{oldPass:i1.value,newPass:i2.value}).then((res) => {
			if (res && res.data && res.data.code == 1) {
				a1.value="";
				a2.value="";
				a3.value="";
				a1.value="密码修改成功";
			}else{
				a1.value="";
				a2.value="";
				a3.value="";
				a1.value=res.data.msg;
			}
		});
	}
	function onReset(){
		a1.value="";
		a2.value="";
		a3.value="";
		i1.value="";
		i2.value="";
		i3.value="";
	}
</script>

<style scoped>
	.mytop{
		margin-top:8px;
	}
</style>